
<template>
  <div>
    <div class="handbox" @click="clear">清除</div>
    <div id="olMap"></div>

    <!-- <div class="info">{{zoom}}</div> -->
  </div>
</template>
 
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import { Projection } from "ol/proj";
import MVT from "ol/format/MVT";
import VectorTileLayer from "ol/layer/VectorTile";
import VectorTileSource from "ol/source/VectorTile";
import XYZ from "ol/source/XYZ";
import CryptoUtil from "../crypto/CryptoUtil";
import { GeoJSON } from "ol/format";
import { Style, Icon, Stroke, Fill, Text, Circle } from "ol/style";
export default {
  name: "OlVectorTiles",
  data() {
    return {
      map: null,
      baseUrl: "http://localhost:8080/geoserver/line/gwc/service/wmts",
      params: null,
      gridsetName: null,
      zoom: "",
    };
  },
  mounted() {
    let str = CryptoUtil.encrypt("QWEASDZXC");
    console.log(34, str);
    let str1 = CryptoUtil.decrypt(str);
    console.log(36, str1);
    //可以出来结果
    (this.gridsetName = "EPSG:4326"),
      (this.params = {
        REQUEST: "GetTile",
        SERVICE: "WMTS",
        VERSION: "1.0.0",
        // LAYER: "pbf_chengdu:DLD_PBF",
        LAYER: "line:gongshui",
        STYLE: "",
        TILEMATRIX: this.gridsetName + ":{z}",
        TILEMATRIXSET: this.gridsetName,
        FORMAT: "application/vnd.mapbox-vector-tile", //切片
        // FORMAT: "application/json;type=geojson", //切片
        TILECOL: "{x}",
        TILEROW: "{y}",
      });

    //切片名
    let matrixIds = [
      "EPSG:4326:0",
      "EPSG:4326:1",
      "EPSG:4326:2",
      "EPSG:4326:3",
      "EPSG:4326:4",
      "EPSG:4326:5",
      "EPSG:4326:6",
      "EPSG:4326:7",
      "EPSG:4326:8",
      "EPSG:4326:9",
      "EPSG:4326:10",
      "EPSG:4326:11",
      "EPSG:4326:12",
      "EPSG:4326:13",
      "EPSG:4326:14",
      "EPSG:4326:15",
      "EPSG:4326:16",
      "EPSG:4326:17",
      "EPSG:4326:18",
      "EPSG:4326:19",
      "EPSG:4326:20",
      "EPSG:4326:21",
    ];

    //分辨率
    let resolutions = [
      0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625,
      0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625,
      6.866455078125e-4, 3.4332275390625e-4, 1.71661376953125e-4,
      8.58306884765625e-5, 4.291534423828125e-5, 2.1457672119140625e-5,
      1.0728836059570312e-5, 5.364418029785156e-6, 2.682209014892578e-6,
      1.341104507446289e-6, 6.705522537231445e-7, 3.3527612686157227e-7,
    ];

    //底图
    let tileOSM = new TileLayer({
      // source: new OSM()
      source: new XYZ({
        url:
          // "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer"
          "http://t4.tianditu.com/DataServer?T=vec_w&tk=5a257cd2df1b3311723bd77b0de14baf&x={x}&y={y}&l={z}",
      }),
    });

    //切片策略
    let tileGrid = new WMTSTileGrid({
      tileSize: [256, 256],
      extent: [73.502355, 3.39716187, 135.09567, 53.563269], //范围
      // extent: [	8182244.730706424,378392.10080518806,15038781.192776123,7087874.74616931], //范围
      origin: [-180.0, 90.0], //切片原点
      resolutions: resolutions, //分辨率
      matrixIds: matrixIds, //层级标识列表，与地图级数保持一致
    });

    //设置地图投影
    let projection = new Projection({
      code: "EPSG:4326",
      units: "degrees",
      axisOrientation: "neu",
    });

    let vectorSource = new VectorTileSource({
      url: this.urlConstruct(),
      // url:
      //   "/api/geoserver/gwc/service/wmts?" +
      //   "REQUEST=GetTile&SERVICE=WMTS&VERSION=1.0.0&LAYER=testXXX:china_text" +
      //   "&STYLE=&TILEMATRIX=EPSG:900913:3&TILEMATRIXSET=EPSG:900913&" +
      //   "FORMAT=application/vnd.mapbox-vector-tile&TILECOL=6&TILEROW=3",
      format: new MVT({}), //切片
      // format: new GeoJSON({}), //geojson
      projection: projection,
      tileGrid: tileGrid,
    });

    let vectorLayer = new VectorTileLayer({
      source: vectorSource,
      wrapX: false,
      id: "linelayers",
    });
    vectorLayer.setStyle(function (feature) {
      // 这里可以根据feature的属性或其他条件来设置样式
      return new Style({
        stroke: new Stroke({
          color: "#33bbff", // 黄色边界
          width: 1,
        }),
      });
    });
    let views = new View({
      center: [113.11729431152344, 23.011207580566406],
      projection: projection,
      zoom: 6,
      resolutions: resolutions,
      // extent: [-180.0, -90.0, 180.0, 90.0]
    });
    this.map = new Map({
      layers: [tileOSM, vectorLayer],
      view: views,
      target: "olMap",
    });
    this.map.on("moveend", (e) => {
      this.zoom = e.map.getView().getZoom();
      // var view = this.map.getView();
      // var zoom = view.getZoom(); // 获取当前的缩放级别
      // console.log("当前地图的缩放级别为:", zoom);
      // 在这里可以根据zoom值进行相应的操作
    });
  },
  methods: {
    clear() {
      let layers = this.map
        .getLayers()
        .getArray()
        .find((item) => item.get("id") == "linelayers");
      // let layers= this.map.getLayerById('linelayers')
      this.map.removeLayer(layers);
    },
    urlConstruct() {
      let url = this.baseUrl + "?";
      for (let param in this.params) {
        url = url + param + "=" + this.params[param] + "&";
      }
      url = url.slice(0, -1);
      return url;
    },
  },
};
</script>
 
<style>
#olMap {
  width: 100vw;
  height: calc(100vh - 40px);
}
/*隐藏ol的一些自带元素*/
.ol-attribution,
.ol-zoom {
  display: none;
}
</style>
